<template>
  <div class="code-box">
    <h3 class="code-box-title">2、Readonly和shallowReadonly的使用</h3>
    <div class="code-box-content">
      <p>a、Readonly是将所有响应属性数据设置为只读的，不能修改</p>
      <p>b、shallowReadonly是将所有第一层响应属性数据设置为只读的，不能修改。但是第二层的响应数据是可以修改的。</p>
      <p>c、通过Readonly包装之后，所有属性（shallowReadonly是第一层的属性）可以修改，但是typescript提示不支持。</p>
      <p>ref(0)：{{ count }}</p>
      <p>readonly(count)：{{ data }}</p>

      <p>reactiveData：{{ reactiveData }}</p>
      <p>readonly(reactiveData：)：{{ readonlyReactiveData }}</p>

      <p>refData：{{ refData }}</p>
      <p>shallowReadonly(refData)：{{ shallowReadonlyRefData }}</p>

      <button class="btn" @click="handleClick">handleClick</button>
      <button class="btn" @click="handleReadonlyClick">handleReadonlyClick</button>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref, readonly, reactive, shallowReadonly } from 'vue';

const count = ref(0)
const data = readonly(count)

const reactiveData = reactive({
  name: '张三',
  age: 20,
  location: {
    city: '北京',
    x: 100,
    y: 200
  }
})
const readonlyReactiveData = readonly(reactiveData) //包装之后，reactiveData的属性也是不能改变或者减少属性赋值的，可以执行，但是代码提示不支持

const refData = ref({
  name: 'jack',
  age: 32,
  hobby: ['reading', 'running']
})
const shallowReadonlyRefData = shallowReadonly(refData) //包装之后，reactiveData的属性也是不能改变的，赋值修改属性会报错

function handleClick() {
  count.value++;
  reactiveData.location = { x: 1, y: 2, city: '上海' };
  // reactiveData.location = { x: 1, y: 2};
  refData.value.hobby = ['coding2', 'jumping']
}
function handleReadonlyClick() {
  // data.value++;
}
</script>

<style scoped lang='scss'>
.code-box {
  border: 1px solid #ddd;
  padding: 10px;
  min-height: 50px;
  margin-bottom: 20px;

  &-title {
    border-bottom: 1px solid #ddd;
    padding-bottom: 20px;
  }
}

.btn.active {
  background-color: #f0a80d;
  color: #fff;
}
</style>
